<template>
  <div class="home">
    <navbar class="home-nav">
      <div slot="center">购物车</div>
    </navbar>
    <control-bar :titles="['流行', '新款', '精选']" 
    v-show="showControlBar"
    ref="controlBar2"
    @barClick="barClick"></control-bar>
    <!-- scroll 绑定属性probeType=3 表示监听滚动 -->
    <scroll class="content" ref="scroll" :probeType="3" 
    @contentScroll="contentScroll"
    @loadMore="loadMore"
    >
      <home-swiper :banners="banners" @swiperImgLoad="swiperImgLoad"></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature-view></feature-view>
      <control-bar :titles="['流行', '新款', '精选']" 
      v-show="!showControlBar"
      ref="controlBar1"
      @barClick="barClick"></control-bar>
      <goods-list :goods="goods[type].list"></goods-list>
    </scroll>
    <!-- 组件不能直接加点击事件, 需要加native -->
    <back-top @click.native="backClick" v-show="showBackTop"></back-top>
  </div>
</template>

<script>
import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView";
import FeatureView from "./childComps/FeatureView";

import NavBar from "@/components/common/navbar/NavBar";
import Scroll from "@/components/common/scroll/Scroll";

import ControlBar from "@/components/content/controlBar/ControlBar";
import GoodsList from "@/components/content/goods/GoodsList";
import BackTop from "@/components/content/backTop/BackTop";

import { getHomeMultidata, getHomeGoods } from "@/network/home.js";

export default {
  name: "home",
  components: {
    "home-swiper": HomeSwiper,
    "recommend-view": RecommendView,
    "feature-view": FeatureView,
    navbar: NavBar,
    scroll: Scroll,
    "control-bar": ControlBar,
    "goods-list": GoodsList,
    "back-top": BackTop
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      type: "pop",
      showBackTop: false,
      barOffsetTop: window.screen.height - 44,
      showControlBar: false
    };
  },
  created() {
    this.homeMultidata();
    this.homeGoods("pop");
    this.homeGoods("new");
    this.homeGoods("sell");
  },
  mounted() {
    this.$bus.$on("imgLoad", this.debounce(this.imgLoad));
  },
  methods: {
    homeMultidata() {
      getHomeMultidata()
        .then(res => {
          this.banners = res.data.banner.list;
          this.recommends = res.data.recommend.list;
        })
        .catch(err => {
          console.log(err);
        });
    },

    homeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then(res => {        
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
      });
    },

    barClick(index) {
      if (index == 0) this.type = "pop"
      else if (index == 1) this.type = "new"
      else this.type = "sell"
      // 修复两个control-bar选中显示不一致
      this.$refs.controlBar2.currentIndex = this.$refs.controlBar1.currentIndex = index
    },

    backClick() {
      // 在scroll组件上加上 ref='scroll' 就可以通过下面的方式直接拿到组件
      this.$refs.scroll.scrollTo(0, 0)
    },

    swiperImgLoad() {      
      this.barOffsetTop = this.$refs.controlBar1.$el.offsetTop - 44
    },

    contentScroll(pos) {
      this.showBackTop = pos.y < -1000
      if (pos.y < -this.barOffsetTop) {
        if (!this.showControlBar) {
          // console.log('吸顶', this.barOffsetTop);
          this.showControlBar = true
        }
      } else {
        if (this.showControlBar) {
          // console.log('取消吸顶', this.barOffsetTop);
          this.showControlBar = false
        }
      }
    },

    loadMore() {
      this.homeGoods(this.type)
      this.$refs.scroll.finishPullUp()
    },

    imgLoad() {
      this.$refs.scroll.refresh()
    },

    debounce(func, delay=300) {
      // 防抖函数
      let timer = null            
      return function() {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          func(this)
        }, delay)
      }      
    },    
  }
};
</script>

<style scoped>
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.home {
  padding-top: 44px;
}
.content {
  height: calc(100vh - 44px - 49px);
  overflow: hidden;
}
</style>